<template>
	 <div>
	    <div style="width: 100%;height: 100%;position: absolute;color: #ffffff;" :style="{ 'background':config.config.property.bgColor}">
	      <div style="width: 100%;height: 25px;position: absolute;left: 0;top: 8%;text-align: center;" :style="{ 'font-size':config.config.property.expectedFontsize+'px','color': config.config.property.expectedColor}">预计完成时间:</div>
	      <div style="position: absolute;left: 0;top: 25%;width: 100%;height: 25px;">
	        <ul
	          style="width: 100%;height: 100%;list-style: none;margin: 0;padding: 0;position: absolute;left: 0;right: 0;margin: auto;text-align: center;">
	          <li class="list_child" v-for="(item,index) in String(pageData[0].leftday)"
	            style="width: 25px;height: 25px;margin-right:5px;text-align: center;line-height: 25px;" :style="{ 'font-size':config.config.property.estimatedDaystextcolorFontsize+'px','color': config.config.property.estimatedDaystextcolor}">
	            <span style="z-index: 2;">{{item}}</span>
	          </li>
	          <span style="display: inline-block;height: 100%;line-height: 32px;">
	            天
	          </span>
	          <!-- <div style="width: 20px;height: 20px;font-size: 15px;position: absolute;
	          bottom: 0;right: 8%;">天</div> -->
	        </ul>
	      </div>
	      <div style="width: 80%;position: absolute;left: 10%;top: 45%;height: 19px;overflow: hidden;">
	        <ul style="list-style: none;margin: 0;padding: 0;width: 80%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;" :style="{'background':config.config.property.progressBarbgcolor}">
	          <li style="height: 100%;position: absolute;left: 0;right: 0;z-index: 0;" :style="{'width': widthstyle + '%','background':config.config.property.progressBarcolor}"></li>
	          <li v-for="item in 30" style="width: 2%;height: 100%;transform: skew(20deg);float:left;margin-right: 2%;border-left: 5px solid #0A2048;z-index: 20;"></li>
	        </ul>
	        <div style="width: 17%;height: 100%;position: absolute;
	        right: 0;top: 0;line-height: 19px;text-align: center;margin-left: 8px"
	        :style="{ 'font-size':config.config.property.percentageFontsize+'px','color': config.config.property.percentagecolor}"
	        >{{widthstyle+'%'}}</div>
	        <!-- <el-progress :percentage="percentage" :stroke-width="19" striped striped-flow /> -->
	      </div>
	      <div style="position: absolute;width: 95%;height: 25px;left: 2.5%;top: 60%;">
	        <img src="./image/c.png" alt=""
	          style="width: 100%;height: 15px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;z-index: 1;" />
	        <div
	          style="width: 40%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;z-index: 2;line-height: 25px;font-family: '微软雅黑';text-align: center;"
	          :style="{ 'font-size':config.config.property.designFontsize+'px','color': config.config.property.designtextcolor}"
	          >
	          <span>设计总长度</span>
	          <span :style="{'color': config.config.property.designHighlighttextcolor}">{{pageData[0].len}}<i>米</i></span>
	        </div>
	      </div>
	      <div v-if="pageData[0].height" style="width: 15%;height: 40px;position: absolute;top: 30%;left: 0%; transform: rotate(90deg);">
	        <img src="./image/c.png" alt="" style="width: 100%;height: 14px;position: absolute;top: 0;bottom: 0;top: 0;left: 0;margin: auto;"/>
	        <div>
	          <div style="transform: rotate(270deg);position: absolute;top: -60%;right:45%;" :style="{ 'font-size':config.config.property.heightextcolorFontsize+'px','color': config.config.property.heighttextcolor}">高度</div>
	          <div style="width: 100%;height: 30px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;line-height: 30px;text-align: center;" :style="{ 'font-size':config.config.property.heightextcolorFontsize+'px','color': config.config.property.heighttextcolor}">{{pageData[0].height}}<i>米</i></div>
	        </div>
	      </div>
	      <div style="width: 100%;height: 25px;position: absolute;left: 0;top: 80%;">
	        <ul
	          style="list-style: none;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;left: 0;right: 0;margin: auto;">
	          <li :title="'当前已完成'+pageData[0].completed+'米'" class="listChildchild" style="width: 50%;height: 100%;position: absolute;left: 0;top: 0;line-height: 25px;text-align: center;" :style="{ 'font-size':config.config.property.currentFontsize+'px','color': config.config.property.currenttextcolor}">
	            <img src="./image/l.png" alt="" style="margin-right: 5px;" />
	            <span>当前已完成</span>
	            <span :style="{'color': config.config.property.currentHighlighttextcolor}">{{pageData[0].completed}} <i>米</i></span>
	          </li>
	          <li :title="'剩余'+pageData[0].remaining+'米'" class="listChildchild" style="width: 50%;height: 100%;position: absolute;right: 0;top: 0;line-height: 25px;text-align: center;" :style="{ 'font-size':config.config.property.remainingFontsize+'px','color': config.config.property.remainingtextcolor}">
	            <img src="./image/h.png" alt="" style="margin-right: 5px;" />
	            <span>剩余</span>
	            <span :style="{'color': config.config.property.remainingHighlighttextcolor}">{{pageData[0].remaining}}<i>米</i></span>
	
	          </li>
	        </ul>
	      </div>
	    </div>
	  </div>
</template>
<script>
	import chartBase from '@/mixin/chart-base.js';
	import emitComponentBase from '@/mixin/emit-component-base.js';
	import dataModel from '@/models/panel-config-data.js';
	import {
		checkNegative
	} from '@/utils/util';
	import {
		mapState
	} from 'vuex';
	import config from './config/config';
	const itemsPerPage = 4;
	export default {
		name: 'progress',
		components: {

		},
		mixins: [chartBase, emitComponentBase],
		props: ['pareentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'w', 'h', 'Item'],
		data() {
			return {
				widthstyle:'',
				percentage:70,
				pageData:[{
					"len": 900,
					        "leftday": 100,
					        "completed": 0,
					        "remaining": 900,
					        "height": 4.7
				}]
			};
		},
		computed: {
			...mapState({}),
		},
		watch: {

		},
		created() {
			this.orgConfig = config;
			this.config = JSON.parse(JSON.stringify(this.orgConfig));
			this.chartId = `${this.widgetInstanceId}_01`;

		},
		mounted() {
			if (window.isLocalEnv) {
				this.loadWidget();
			}
		},
		methods: {

			// 初始加载时 以及 编排面更改配置时 触发
			loadWidget(pageStatus) {
				this.pageStatus = pageStatus;
				this.updateConfigProperty();
				this.updateConfigData();
				if (window.isLocalEnv || this.emitComponentStatus) {
					this.updateParams(pageStatus);
					if (!this.isRealTime) {
						this.debounceGetData();
					}
				}
				this.afterLoadWidget();
				this.checkNegative(this.apiResult);
			},

			// 接收xvue发来的实时数据
			handleRealTimeCommunication(realTimeData) {
				if (this.config.config.property.isDebounce && this.isStopRealData) {
					return;
				}

				const result = this.getResult(realTimeData);
				if (this.isNoData || this.autoRefreshIsSameRes(result)) {
					this.isLoading = false;
					return;
				}
				const {
					data,
					property
				} = this.config.config;

				// api请求，拿到数据
				if (data.dataSourceType !== 'xMinerRedisRealTime') {
					this.getCorrectParams(this.params, data.dataSourceType); // 参数存入xvue，导出数据时使用
				}
				// this.apiResult = result;
				// this.lastParams = null;
				// this.sendDataToConfig(result);
				// const convertedData = convertData(result, property);
				// if (convertedData === -1) {
				//   this.$message.error(this.$demoi18n('view.dataSourceTypeErr'));
				//   this.setDataException();
				//   return;
				// }
				// this.generateChart(convertedData);
				// this.isLoading = false;
			},
			acceptEvtMsg(paramters, key, obj) {
				this.checkUpdateParams(obj);
			},
			checkUpdateParams(obj) {
				// 检查下是否和本组件有关
				const _obj = obj || {};
				let oo = {}
				let flag = false;
				for (const key in _obj) {
					if (key.indexOf(EMIT_PARAMS_OBJ) > -1) {
						const o = _obj[key];
						if (o.eventKey) {
							const event = this.config.events.find(e => e.type === 'in' && e.key === o.eventKey);
							if (event) {
								flag = true;
								oo = o
							}
							break;
						}
					}
				}
				if (flag) {
					// 和本组件有关再执行组件接收到事件后的相关操作
					console.log('_obj', _obj)
					console.log('oo', oo)

					this.isNoData = false;
					this.isLoading = true;
					this.autoRefresh();
					const alarm_id = oo?.parameters[oo?.keys[0]]
					let param = {
						code: 'alarm_id',
						value: alarm_id
					}
					let paramOo = [param]

					// api请求，拿到数据
					const {
						data
					} = this.config.config
					this.isLoading = true
					const method = `getChartData${data.dataSourceType}`;
					const trueParams = this.getCorrectParams(this.params, data.dataSourceType);
					trueParams = {
						...trueParams,
						params: paramOo,
					};

					dataModel[method](trueParams, data)
						.then(result => {
							this.pageData = result
							this.widthstyle= ((this.pageData[0].completed / this.pageData[0].len) * 100).toFixed(2)
						})
						.catch(err => {
							this.handleChartDataError(err);
						})
						.finally(() => {
							this.isLoading = false;
						});
				}
			},
			getChartData() {
				const {
					data,
					property
				} = this.config.config;

				// 如果dataSourceType为静态数据,把数据放到Vuex，发出事件，然后退出
				if (data.dataSourceType === 'staticData') {
					this.widthstyle= ((this.pageData[0].completed / this.pageData[0].len) * 100).toFixed(2)
					// 重置数据异常状态
					this.resetAbnormalType();
					return;
				}

				// api请求，拿到数据
				if (data.dataSourceType) {
					this.isNoData = false;
					this.isLoading = true;
					this.autoRefresh();
					const method = `getChartData${data.dataSourceType}`;
					const params = this.getCorrectParams(this.params, data.dataSourceType);
					dataModel[method](params, data)
						.then(result => {
							this.pageData = result
							this.widthstyle= ((this.pageData[0].completed / this.pageData[0].len) * 100).toFixed(2)
							// 重置数据异常状态
							this.resetAbnormalType();
							this.reportIfFieldsError(this.getParams()?.propertyMapping, result);
							if (this.autoRefreshIsSameRes(result)) {
								return;
							}

						})
						.catch(err => {
							this.handleChartDataError(err);
						})
						.finally(() => {
							this.isLoading = false;
						});
				} else {
					// 如果在用户面，则给提示
					if (this.$route.name === 'userHomePage') {
						this.$message({
							message: this.$demoi18n('view.dataSourceTypeEmpty'),
							type: 'warning',
						});
					}
				}
			},
			goToPage(page) {
				const start = (page - 1) * itemsPerPage
				this.paginatedItems = this.apiResult.slice(start, start + itemsPerPage)
				this.currentPage = page
			},
			// itemClick(params) {
			// 	console.log(this.widgetInstanceId)
			//   const orgEvtKey = this.orgConfig.events[0].key
			//   const outEvt = this.config.events[0]
			//   const { key } = outEvt.parameters[0] // key: 对应xminer接口中的参数/编码
			//   const { paramKey } = outEvt // paramKey: 对应数据面板中的字段名，如s，y
			//   console.log('=======params============', params)
			//   const outObj = {
			//     emit_params_obj: {
			//       eventKey: outEvt.key,
			//       type: 'terms',
			//       keys: [key],
			//       parameters: {
			//         [key]: params[paramKey],
			//       },
			//       widgetInstanceId: this.widgetInstanceId,
			//       sendTime: new Date().getTime(),
			//     },
			//   }
			//   // console.log("===================",outObj)
			//   // xvue提供的emit方法，用于发出事件的
			//   if (import.meta.env.PROD) {
			//     adapterComponent.emit(orgEvtKey, outObj)
			//   } else {
			//     emit(orgEvtKey, outObj)
			//   }
			// },
			// getTooltip() {
			//   return {
			//     config: this.config.config.property.tooltip || {},
			//     vars: {},
			//     params: this.params,
			//     parentComp: this,
			//   };
			// },
			checkNegative,
			itemClick(params, data) {
				console.log(params)
			  this.chartClick(params, data);
			  if (params) {
			    this.sendAdvancedLinkagge({...params});
			  }
			},
			handleAsTooltip(filterRes) {
			  const { property } = this.config.config;
			  const convertedData = convertData(filterRes, property);
			  this.generateChart(convertedData);
			},
		},
	};
</script>
<style lang="less" scoped>
	// 图表通用样式，主要有黑色loading 和 黑色 ‘没有数据’，样式名需一致
	@import '../../common/chart.less';
</style>
<style>
	/* 全局loading样式修改 */

	.chartMain .loading .el-loading-spinner .circular {
		width: 34px !important;
		height: 34px !important;
	}

	.chartMain .el-dialog__header {
		padding: 9px 20px 10px !important;
		background: #2a3352 !important;
		text-align: left;
		box-sizing: border-box;
		height: 50px;
		line-height: 32px;
	}

	.chartMain .el-dialog__title {
		text-align: left;
		/* font-size: 18px; */
		line-height: 18px !important;
		color: #b2d3fe !important;
	}

	.chartMain .el-dialog__body {
		padding: 10px 20px 30px 20px;
		background: #1a2032 !important;
		line-height: 24px;
		font-size: 14px;
	}

	.chartMain .el-dialog__headerbtn .el-dialog__close {
		color: #b2d3fe !important;
	}

	.chartMain .dialog-footer {
		text-align: right;
		margin-bottom: -14px;
		margin-right: 4px;
	}

	.chartMain .el-dialog__headerbtn {
		top: 15px;
		/* font-size: 18px; */
	}
</style>
<style scoped lang="less">
  /deep/.el-progress-bar__outer {
    border-radius: 0 !important;
    background: none !important;
  }

  /deep/.el-progress-bar__inner {
    border-radius: 0 !important;
  }

  /deep/.el-progress__text {
    color: #ffffff;
  }

  .list_child {
    color: #ffffff;
    background-image: url(./image/sz.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
  }

  .gradient-progress {
    background-image: linear-gradient(to right, #ffc107, #e91e63);
  }
  .listChildchild{
    white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
              cursor: pointer; /* 将鼠标指针变为手指形状 */
  }
</style>